<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '活动评分列表',
  },
}
</route>

<template>
  <scroll-view
    scroll-y
    class="scroll-view flex-1"
    refresher-enabled
    enable-back-to-top
    :refresher-triggered="refresherTriggered"
    @refresherrefresh="onRefresherrefresh"
    @scrolltolower="getDataList"
  >
    <view class="data-list">
      <template v-if="dataList.length">
        <view v-for="item in dataList" :key="item.id" class="data-item">
          <view class="flex justify-between">
            <view>
              <view class="data-item-title">{{ item.name }}</view>
              <view class="data-item-tip">活动类型：{{ item.type_dictText }}</view>
              <view class="data-item-tip">活动日期：{{ item.date }}</view>
              <view class="data-item-tip">礼堂：{{ item.hallId_dictText }}</view>
            </view>
            <view class="flex flex-col items-end justify-end">
              <wd-button
                custom-class="data-item-button"
                size="small"
                @click="uniNavigateTo(`/pages-sub/activity-mark/detail/index?id=${item.id}`)"
              >
                详情
              </wd-button>
              <wd-button v-if="item.comment" size="small" @click="showMarkDetail(item)">
                考核详情
              </wd-button>
              <JudgePermission v-else action="hall:hall_activity:comment">
                <wd-button
                  size="small"
                  @click="uniNavigateTo(`/pages-sub/activity-mark/mark/index?id=${item.id}`)"
                >
                  考核
                </wd-button>
              </JudgePermission>
            </view>
          </view>
        </view>
      </template>
      <template v-else>
        <wd-status-tip image="content" tip="暂无内容" />
      </template>
    </view>
    <wd-loadmore
      v-if="dataList.length"
      finished-text="没有更多了"
      :state="loadState"
      @reload="getDataList"
    />
  </scroll-view>

  <wd-message-box selector="wd-message-box-slot">
    <view class="mark-detail">
      <view class="mark-detail-item">
        <view class="label">活动规模：</view>
        <view class="value">{{ formModel.scaleScore }}分</view>
      </view>
      <view class="mark-detail-item">
        <view class="label">活动新颖性：</view>
        <view class="value">{{ formModel.innovationScore }}分</view>
      </view>
      <view class="mark-detail-item">
        <view class="label">执行效率：</view>
        <view class="value">{{ formModel.efficiencyScore }}分</view>
      </view>
      <view class="mark-detail-item">
        <view class="label">活动意义：</view>
        <view class="value">{{ formModel.meaningScore }}分</view>
      </view>
      <view class="mark-detail-item">
        <view class="label">综合评价：</view>
        <view class="value">{{ formModel.note }}分</view>
      </view>
    </view>
  </wd-message-box>
</template>

<script setup>
import { useMessage } from 'wot-design-uni'
import { uniNavigateTo, formatUrlString, currentPageNeedRefresh } from '@/utils'
import ActivityApi from '@/service/activity'
import JudgePermission from '@/components/JudgePermission.vue'

const columns = [
  { label: '5分', value: '5' },
  { label: '10分', value: '10' },
  { label: '15分', value: '15' },
  { label: '20分', value: '20' },
  { label: '25分', value: '25' },
]

const formModel = ref({
  scaleScore: '',
  innovationScore: '',
  efficiencyScore: '',
  meaningScore: '',
  note: '',
})

const message = useMessage('wd-message-box-slot')

const showMarkDetail = (item) => {
  formModel.value = { ...item.comment }
  message.alert({
    title: '考核详情',
  })
}

const loadState = ref('loading')
const pageObj = ref({
  pageNo: 1,
  pageSize: 10,
})
const dataList = ref([])

const getDataList = async () => {
  if (loadState.value === 'finished') return
  try {
    const params = {
      ...pageObj.value,
      status: 'complete',
      column: 'createTime',
      order: 'desc',
    }
    console.log('params', params)
    const { code, result } = await ActivityApi.getActivityMarkList(params)
    if (code === 200 && result) {
      const { records, pages } = result
      if (records?.length) {
        dataList.value = [...dataList.value, ...records]
      }
      if (pageObj.value.pageNo < pages) {
        pageObj.value.pageNo++
      } else {
        loadState.value = 'finished'
      }
    } else {
      loadState.value = 'error'
    }
  } catch (e) {
    loadState.value = 'error'
    // console.log('e', e)
  }
}

const reset = () => {
  pageObj.value.pageNo = 1
  dataList.value = []
  loadState.value = 'loading'
}

const refreshList = () => {
  reset()
  getDataList()
}

const refresherTriggered = ref(false)
const onRefresherrefresh = async () => {
  refresherTriggered.value = true
  // 重置分页数据，刷新接口
  reset()
  await getDataList()
  refresherTriggered.value = false
}

const updateList = () => {
  refreshList()
}

onLoad(() => {
  refreshList()
})

defineExpose({
  refreshList,
  updateList,
})
</script>

<style lang="scss" scoped>
.scroll-view {
  height: calc(100vh - 46px);
}

.data-list {
  padding: $uni-spacing-col-lg $uni-spacing-row-lg;

  .data-item {
    padding-bottom: $uni-spacing-col-lg;
    margin-bottom: $uni-spacing-col-lg;
    border-bottom: 1px solid $uni-border-color;

    &-image {
      margin-bottom: $uni-spacing-col-base;

      .img {
        height: 200px;
      }
    }

    &-title {
      margin-bottom: $uni-spacing-col-sm;
      font-weight: 600;
    }

    &-tip {
      margin-bottom: $uni-spacing-col-sm;
      font-size: $uni-font-size-base;
      color: $uni-text-color-grey;

      .tip-text {
        margin-right: $uni-spacing-row-lg;
      }
    }

    :deep() .data-item-button {
      margin-bottom: $uni-spacing-col-base;
    }
  }
}

.mark-detail {
  &-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: $uni-spacing-col-base;

    .label {
      width: 180rpx;
      text-align: right;
    }

    .value {
      flex: 1;
      text-align: left;
    }
  }
}
</style>
